<script setup>
import { ElMessage } from 'element-plus'
import { reactive, ref } from 'vue'
import { loginByIdService, loginByEmailService } from '../api/login'
import { captchaService } from '@/api/captcha'
import { sendValidationServer } from '@/api/validation'
import router from '../router';

const captcha = ref('')

const flag = ref(true)

const form = reactive({
    id: '',
    password: '',
    code:'',
    userType:''
})

async function getCaptcha() {
    captcha.value = (await captchaService()).data
}

getCaptcha()

function getRes(res) {
    ElMessage.success('登录成功')
    localStorage.setItem('Authorization', res.data)
    router.push('/')
}

const loginById = async () => {
    let result = await loginByIdService(form.id,form.password,form.code,form.userType)
    getRes(result)
}

const rules = {
    id: [{ required: true, message: '账号不可为空！', trigger: 'blur' }],
    email: [
        { required: true, message: '邮箱不可为空！', trigger: 'blur' },
        { type: 'email', message: '请输入正确的邮箱地址', trigger: ['blur', 'change'] }
    ],
    // type: [{ required: true, message: '类型不可为空！', trigger: 'blur' }],
    code: [{ required: true, message: '验证码不可为空！', trigger: 'blur' }],
    password: [{ required: true, message: '密码不可为空！', trigger: 'blur' }],
    userType: [{ required: true, message: '用户类型不可为空！', trigger: 'blur' }]
}

const isShow = ref(0)

const time = ref(60)
let timer = null

const countdown = () => {
    if (timer) {
        clearTimeout(timer);
    }
    timer = setTimeout(() => {
        if (time.value > 0) {
            time.value--; // 时间减1  
            countdown(); // 递归调用，继续倒计时  
        } else {
            clearTimeout(timer); // 倒计时结束，清除定时器  
            // 在这里可以添加倒计时结束后的处理逻辑  
            isShow.value = 2
            time.value = 60
        }
    }, 1000); // 每秒更新一次时间  
}

const form2 = reactive({
    email: '',
    code:'',
    userType:''
})

const validation = async () => {
    if (form2.email === null || form2.email === '') {
        ElMessage.error('邮箱不可为空')
    } else {
        await sendValidationServer(form2.email)
        ElMessage.success("验证码发送成功")
        isShow.value = 1
        countdown()
    }
}

const loginByEmail = async () => {
    let result = await loginByEmailService(form2.email,form2.code,form2.userType)
    getRes(result)
}

</script>


<template>
    <div
        style="background-image: url('../../public/background.jpg');background-size: cover;width: 100%;height:100vh;overflow: hidden;">
        <div style="background-color: rgb(240,248,255,0.85);width: 500px;border-radius: 25px;margin:auto;">
            <div style="width: 400px;margin: 150px auto;border-radius: 25px;">
                <div style="color:rgb(0, 0, 0);font-size: 30px;text-align: center;padding: 30px;">欢 迎 登 录</div>
                <!-- <div style="text-align: center;font-size: 17px;color: darkgrey;margin-bottom: 20px">
                    <span style="margin-right: 40px;">密码登录</span>
                    <span>邮箱登录</span>
                </div> -->
                <el-form :model="form" v-if="flag" :rules="rules">
                    <el-form-item prop="id">
                        <el-input style="height: 40px;" prefix-icon="user" v-model="form.id" placeholder="输入您的账号"
                            autofocus="true" clearable>
                            <template #append>
                                <el-select v-model="form.userType" placeholder="用户类型" style="width: 125px;background: #fff;"
                                    size="large">
                                    <el-option label="管理员" value="admin" />
                                    <el-option label="教师" value="teacher" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="password">
                        <el-input style="height: 40px;" prefix-icon="lock" type="password" v-model="form.password"
                            placeholder="输入您的密码" show-password clearable />
                    </el-form-item>
                    <el-form-item style="display: flex;" prop="code">
                        <el-input style="height: 40px;flex: 1;" prefix-icon="iphone"
                            v-model="form.code" placeholder="输入图形验证码" show-password clearable />
                        <el-image :src="captcha" style="height: 38px;width: 130px;margin-left: 8px;cursor: pointer" @click="getCaptcha" title="点击切换验证码"/>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="loginById" style="width: 100%;padding: 17px;font-size:20px;" title="点击登录">登
                            录</el-button>
                    </el-form-item>
                    <el-form-item>
                        <p class="otherLogin" @click="flag = false">使用邮箱登录--></p>
                    </el-form-item>
                </el-form>

                <el-form :model="form2" v-if="!flag" :rules="rules">
                    <el-form-item prop="email">
                        <el-input style="height: 40px;" prefix-icon="user" v-model="form2.email" placeholder="输入您的邮箱"
                            autofocus="true" clearable>
                            <template #append>
                                <el-select v-model="form2.userType" placeholder="用户类型" style="width: 125px;background: #fff;"
                                    size="large">
                                    <el-option label="管理员" value="admin" />
                                    <el-option label="教师" value="teacher" />
                                </el-select>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item prop="code">
                        <el-input style="height: 40px;" v-model="form2.code" placeholder="输入邮箱验证码" clearable>
                            <template #suffix>
                                <el-button :type="primary" text style="border: none;color: blue;" v-if="isShow === 0"
                                    @click="validation">获取验证码</el-button>
                                <el-button :type="primary" text style="border: none;color: gray;" v-if="isShow === 1"
                                    disabled>{{ time }}秒</el-button>
                                <el-button :type="primary" text style="border: none;color: blue;" v-if="isShow === 2"
                                    @click="validation">重新获取</el-button>
                            </template>
                        </el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="loginByEmail" style="width: 100%;padding: 17px;font-size:20px;">登
                            录</el-button>
                    </el-form-item>
                    <el-form-item>
                        <p class="otherLogin" @click="flag = true">使用密码登录--></p>
                    </el-form-item>
                </el-form>

                <div style="margin-top: 30px;padding-bottom: 40px;">
                    <span style="float: right;">
                        点击这里<router-link :to="{ name: 'findPassword' }" class="find">找回密码</router-link>
                    </span>
                </div>
            </div>
        </div>
    </div>
</template>

<style>
.find {
    text-decoration: none;
    color: #409eff;
}

.find:hover {
    color: rgb(0, 191, 255);
    text-decoration: underline;
}

.otherLogin {
    color:rgb(38, 38, 237);
    cursor: pointer;
}

.otherLogin:hover{
    color:rgb(23, 24, 24);
}
</style>